<template>
  <div class="data-list-table">
    <div class="table-title">{{ dept.deptName }}</div>
    <div class="table-wrap" ref="tableWrap">
      <el-auto-resizer>
        <template #default="{ width }">
          <el-table-v2 ref="dataTable" :data="tableDate" border scrollbar-always-on header-cell-class-name="table-header-row" empty-text="没有数据" :width="width" :height="400" :columns="columns" fixed></el-table-v2>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, toValue } from 'vue'

const props = defineProps({
  dept: {
    type: Object,
    required: true,
  },
  dataList: {
    type: Array,
    required: true,
    default: () => [],
  },
  tableColumns: {
    type: Array as () => any[],
    required: true,
  },
})
const columns = ref([{ key: `userNick`, dataKey: `userNick`, title: `用户`, width: 150, resizable: true }, ...props.tableColumns])

const tableDate = computed(() => {
  const result = props.dataList.filter((e: any) => e.deptName === props.dept.deptName)
  const list: any = []
  result.forEach((e: any) => {
    list.push({ ...toValue(e) })
  })
  console.log('result', toValue(result))
  console.log('list', list)

  return result
})
columns.value[0].fixed = true
</script>
<style lang="scss" scoped>
.data-list-table {
}
</style>
